<template>
  <view class="cart-page">
    <view class="cart-header">
      <text class="cart-title">购物车</text>
      <text class="edit-btn" @click="toggleEditMode">{{ isEditMode ? '完成' : '编辑' }}</text>
    </view>
    
    <view class="cart-list" v-if="cartItems.length > 0">
      <view 
        v-for="item in cartItems" 
        :key="item.id"
        class="cart-item"
      >
        <view class="item-select" @click="toggleSelect(item.id)">
          <text class="select-icon">{{ item.selected ? '☑️' : '☐' }}</text>
        </view>
        <image class="item-image" :src="item.image" mode="aspectFill" />
        <view class="item-info">
          <text class="item-name">{{ item.name }}</text>
          <text class="item-price">¥{{ item.price }}</text>
        </view>
        <view class="item-actions">
          <view class="quantity-control">
            <text class="quantity-btn" @click="decreaseQuantity(item.id)">-</text>
            <text class="quantity-text">{{ item.quantity }}</text>
            <text class="quantity-btn" @click="increaseQuantity(item.id)">+</text>
          </view>
          <text class="delete-btn" v-if="isEditMode" @click="removeItem(item.id)">删除</text>
        </view>
      </view>
    </view>
    
    <view class="empty-cart" v-else>
      <text class="empty-icon">🛒</text>
      <text class="empty-text">购物车是空的</text>
      <view class="go-shopping-btn" @click="goShopping">去逛逛</view>
    </view>
    
    <view class="cart-footer" v-if="cartItems.length > 0">
      <view class="select-all">
        <text class="select-icon" @click="toggleSelectAll">{{ allSelected ? '☑️' : '☐' }}</text>
        <text class="select-text">全选</text>
      </view>
      <view class="total-info">
        <text class="total-text">合计：¥{{ totalPrice }}</text>
        <view class="checkout-btn" @click="checkout">结算({{ selectedCount }})</view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, computed } from 'vue'

const isEditMode = ref(false)

// 假数据
const cartItems = ref([
  {
    id: 1,
    name: 'iPhone 15 Pro Max',
    price: 9999,
    image: 'https://via.placeholder.com/100x100/ff6b35/ffffff?text=iPhone',
    quantity: 1,
    selected: true
  },
  {
    id: 2,
    name: '时尚休闲T恤',
    price: 89,
    image: 'https://via.placeholder.com/100x100/ff6b35/ffffff?text=T恤',
    quantity: 2,
    selected: true
  }
])

const allSelected = computed(() => {
  return cartItems.value.length > 0 && cartItems.value.every(item => item.selected)
})

const selectedCount = computed(() => {
  return cartItems.value.filter(item => item.selected).length
})

const totalPrice = computed(() => {
  return cartItems.value
    .filter(item => item.selected)
    .reduce((total, item) => total + item.price * item.quantity, 0)
})

const toggleEditMode = () => {
  isEditMode.value = !isEditMode.value
}

const toggleSelect = (itemId) => {
  const item = cartItems.value.find(item => item.id === itemId)
  if (item) {
    item.selected = !item.selected
  }
}

const toggleSelectAll = () => {
  const newStatus = !allSelected.value
  cartItems.value.forEach(item => {
    item.selected = newStatus
  })
}

const increaseQuantity = (itemId) => {
  const item = cartItems.value.find(item => item.id === itemId)
  if (item) {
    item.quantity += 1
  }
}

const decreaseQuantity = (itemId) => {
  const item = cartItems.value.find(item => item.id === itemId)
  if (item && item.quantity > 1) {
    item.quantity -= 1
  }
}

const removeItem = (itemId) => {
  const index = cartItems.value.findIndex(item => item.id === itemId)
  if (index > -1) {
    cartItems.value.splice(index, 1)
  }
}

const goShopping = () => {
  uni.switchTab({ url: '/pages/ShopPage/ShopPage' })
}

const checkout = () => {
  if (selectedCount.value === 0) {
    uni.showToast({ title: '请选择商品', icon: 'none' })
    return
  }
  uni.showToast({ title: '跳转到结算页面', icon: 'none' })
}
</script>

<style scoped>
.cart-page {
  background: #f5f5f5;
  min-height: 100vh;
}
.cart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx;
  background: #fff;
  border-bottom: 1rpx solid #f0f0f0;
}
.cart-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}
.edit-btn {
  font-size: 28rpx;
  color: #ff6b35;
}
.cart-list {
  padding: 20rpx;
}
.cart-item {
  display: flex;
  align-items: center;
  background: #fff;
  padding: 20rpx;
  margin-bottom: 20rpx;
  border-radius: 20rpx;
}
.item-select {
  margin-right: 20rpx;
}
.select-icon {
  font-size: 40rpx;
  color: #ff6b35;
}
.item-image {
  width: 120rpx;
  height: 120rpx;
  border-radius: 20rpx;
  margin-right: 20rpx;
}
.item-info {
  flex: 1;
}
.item-name {
  font-size: 28rpx;
  color: #333;
  margin-bottom: 10rpx;
  display: block;
}
.item-price {
  font-size: 32rpx;
  font-weight: bold;
  color: #ff6b35;
}
.item-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 15rpx;
}
.quantity-control {
  display: flex;
  align-items: center;
  border: 1rpx solid #e0e0e0;
  border-radius: 20rpx;
}
.quantity-btn {
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28rpx;
  color: #666;
}
.quantity-text {
  width: 80rpx;
  text-align: center;
  font-size: 28rpx;
  color: #333;
}
.delete-btn {
  font-size: 24rpx;
  color: #ff4757;
}
.empty-cart {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 100rpx 0;
}
.empty-icon {
  font-size: 120rpx;
  margin-bottom: 30rpx;
}
.empty-text {
  font-size: 28rpx;
  color: #999;
  margin-bottom: 40rpx;
}
.go-shopping-btn {
  background: #ff6b35;
  color: #fff;
  padding: 20rpx 40rpx;
  border-radius: 40rpx;
  font-size: 28rpx;
}
.cart-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #fff;
  padding: 20rpx 30rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1rpx solid #f0f0f0;
}
.select-all {
  display: flex;
  align-items: center;
}
.select-text {
  font-size: 28rpx;
  color: #333;
  margin-left: 15rpx;
}
.total-info {
  display: flex;
  align-items: center;
  gap: 20rpx;
}
.total-text {
  font-size: 28rpx;
  color: #333;
}
.checkout-btn {
  background: #ff6b35;
  color: #fff;
  padding: 20rpx 40rpx;
  border-radius: 40rpx;
  font-size: 28rpx;
}
</style>
